import { createNamespacedHelpers } from "vuex";

const { mapState, mapMutations } = createNamespacedHelpers("editor");

import lcd_engine from "@/lcd.engine.js";

const { setter } = lcd_engine;

export default {
  props: {
    id: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      setter,
    };
  },
  computed: {
    ...mapState([
      "status",
      "restore",
      "layout",
      "selectStack",
      "selectKey",
      "getComponentList",
      "setterID",
      'canvasStyle',
      'schema',
      'variable', 
    ]),
    ...mapState({
      'graph': state => state.schema.graph
    }),
    title() {
      switch (this.status) {
        case "0":
          return "组件";
        case "1":
          return "画板";
        case "2":
          return "缩略图";
        default:
          break;
      }
    },
    config() {
      return this.getComponentList.find((e) => e.id === this.id)
    },
    meta() {
      return this.schema.meta[this.id]
    }
  },
  methods: {
    ...mapMutations([
      "handleVariable",
      "handleGraph",
      "handleLayout", 
      "handleRestore", 
      "handleRemove",
      'handleUpdateComponent',
      'handleCanvasStyle'
    ]),
    handleWidth(w) {
      this.handleUpdateComponent({
        id: this.id,
        key: 'attr',
        value: {
          ...this.config.attr,
          w: Number(w),
        },
      })
    },
    handleHeight(h) {
      this.handleUpdateComponent({
        id: this.id,
        key: 'attr',
        value: {
          ...this.config.attr,
          h: Number(h),
        },
      })
    },
    handleSize(val) {
      this.handleUpdateComponent({
        id: this.id,
        key: 'RESIZE',
        value: val
      })
    }
  },
};
